<template>
  <el-dialog
    :title="isEdit ? '编辑服务' : '添加服务'"
    v-model="dialogVisible"
    :width="dialogWidth"
    :before-close="handleClose"
    destroy-on-close
  >
    <el-form :model="form" :rules="rules" ref="formRef" label-width="120px" class="service-form">
      <div class="form-row">
        <el-form-item label="服务名称" prop="name" class="form-item">
          <el-input v-model="form.name" placeholder="请输入服务名称" />
        </el-form-item>
        <el-form-item label="描述" prop="description" class="form-item">
          <el-input v-model="form.description" placeholder="请输入服务描述" />
        </el-form-item>
      </div>
      
      <div class="form-row">
        <el-form-item label="部署路径" prop="path" class="form-item">
          <el-input v-model="form.path" placeholder="请输入服务部署路径" />
        </el-form-item>
        <el-form-item label="域名" prop="domain" class="form-item">
          <el-input v-model="form.domain" placeholder="请输入服务域名" />
        </el-form-item>
      </div>
      
      <div class="form-row">
        <el-form-item label="端口号" prop="port" class="form-item">
          <el-input-number v-model="form.port" :min="1" :max="65535" placeholder="请输入端口号" style="width: 100%" />
        </el-form-item>
        <el-form-item label="状态" prop="status" class="form-item" v-if="isEdit">
          <el-select v-model="form.status" placeholder="请选择状态" style="width: 100%">
            <el-option label="运行中" value="running" />
            <el-option label="已停止" value="stopped" />
          </el-select>
        </el-form-item>
      </div>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, watch, computed } from 'vue'
import type { FormInstance } from 'element-plus'

interface Service {
  id?: number
  name: string
  description: string
  path: string
  port: number
  domain: string
  status?: 'running' | 'stopped'
}

const props = defineProps<{
  visible: boolean
  service?: Service
  isEdit: boolean
}>()

const emit = defineEmits(['update:visible', 'save'])

const dialogVisible = ref(props.visible)
const formRef = ref<FormInstance>()

// 根据窗口大小计算对话框宽度
const dialogWidth = computed(() => {
  // 如果是移动设备或窄屏设备
  if (window.innerWidth < 768) {
    return '95%'
  } 
  // 中等大小屏幕
  else if (window.innerWidth < 1200) {
    return '70%'
  } 
  // 宽屏设备
  else {
    return '50%'
  }
})

const form = reactive<Service>({
  id: undefined,
  name: '',
  description: '',
  path: '',
  port: 80,
  domain: '',
  status: 'stopped'
})

const rules = {
  name: [
    { required: true, message: '请输入服务名称', trigger: 'blur' },
    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
  ],
  path: [
    { required: true, message: '请输入服务部署路径', trigger: 'blur' }
  ],
  port: [
    { required: true, message: '请输入服务端口号', trigger: 'blur' },
    { type: 'number', min: 1, max: 65535, message: '端口号范围在 1 到 65535 之间', trigger: 'blur' }
  ]
}

watch(() => props.visible, (newValue) => {
  dialogVisible.value = newValue
})

watch(() => dialogVisible.value, (newValue) => {
  emit('update:visible', newValue)
})

watch(() => props.service, (newValue) => {
  if (newValue) {
    form.id = newValue.id
    form.name = newValue.name
    form.description = newValue.description
    form.path = newValue.path
    form.port = newValue.port
    form.domain = newValue.domain
    form.status = newValue.status
  }
}, { immediate: true })

const handleClose = () => {
  dialogVisible.value = false
}

const submitForm = async () => {
  if (!formRef.value) return
  
  await formRef.value.validate((valid, fields) => {
    if (valid) {
      emit('save', { ...form })
      dialogVisible.value = false
    }
  })
}

defineExpose({
  dialogVisible
})
</script>

<style scoped>
.dialog-footer {
  text-align: right;
  margin-top: 20px;
}

.service-form {
  max-width: 100%;
}

.form-row {
  display: flex;
  gap: 20px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.form-item {
  flex: 1;
  min-width: 250px;
}

@media (max-width: 768px) {
  .form-row {
    flex-direction: column;
    gap: 0;
  }
  
  .form-item {
    width: 100%;
  }
}
</style> 